<template>
  <div ref="canvasBox">
    <canvas ref="canvasRef"> </canvas>
  </div>
</template>

<script lang="ts" setup>
interface Point {
  x: number;
  y: number;
}

class Particle {
  x: number;
  y: number;
  size: number;
  constructor(x: number, y: number, size: number) {
    this.x = x;
    this.y = y;
    this.size = size;
  }
}

const canvasBox = ref(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
const { width, height } = useElementSize(canvasBox);
let animationFrameId: number;
// 圆角度
let circleAngle = 0;
// 圆半径
let circleRadius = 50;
// 圆段数
let circleCycle = 8;

const draw = (ctx: CanvasRenderingContext2D) => {
  ctx.clearRect(0, 0, width.value, height.value);
  // 确认圆心与圆环
  let circlePointer: Point = { x: width.value / 2, y: height.value / 2 };
  drawCircle(ctx, circlePointer);
  animationFrameId = requestAnimationFrame(() => {
    // draw(ctx);
  });
};

const drawCircle = (ctx: CanvasRenderingContext2D, circlePointer: Point) => {
  let angleNum = 0;
  while (angleNum < 360) {
    // angleNum += 360 / circleSegment;
    // console.log(Math.tan(angleNum));
  }
  // ctx.beginPath();
  // ctx.moveTo(20, 20);
  // ctx.quadraticCurveTo(20, 100, 200, 20);
  // ctx.stroke();
  // ctx.closePath();
};

// 挂载完成后绘制
onMounted(async () => {
  await nextTick();
  // 如果casvasRef is null 则不绘制
  if (canvasRef.value == null) return;
  canvasRef.value.width = useElementSize(canvasBox).width.value;
  canvasRef.value.height = useElementSize(canvasBox).height.value;
  const ctx = canvasRef.value.getContext("2d");
  if (ctx == null) {
    console.log("Canvas.Context is NULL");
    return;
  }
  // 执行绘画逻辑
  draw(ctx);
});
onUnmounted(() => {
  cancelAnimationFrame(animationFrameId);
});
</script>

<style scoped></style>
